<script setup>
/**
 * @name MyTemplate.vue
 * @description 我的模板-组件
 */
// vue相关
import {
  computed,
  onMounted,
  onUnmounted,
  reactive,
  ref,
  watch,
  createVNode,
  nextTick
} from "vue";
// 弹窗组件
import addTemplateDialog from "@/views/shotstack/CreationCenter/components/addTemplateDialog.vue";
// 路由
import { useRouter } from "vue-router";
const router = useRouter();
// icon引入
import {
  CloseOutlined,
  ExclamationCircleOutlined,
  EllipsisOutlined,
} from "@ant-design/icons-vue";
// 工具引入
import utils from "@/common/utils/utils.js";
// 全局提示
import { message, notification } from "ant-design-vue";
import store from "@/store/index.js";

// 枚举数据引入 -- 下拉数据
import {
  formerItemOneArr,
  formerItemTwoArr,
  material_numberArr,
  material_durationArr,
} from "../modules/modules/templateData.js";

// 模态框
import { Modal } from "ant-design-vue";

import request from "@/common/utils/request";
import TemplateDetail from "@/views/shotstack/MuseMixedCut/TemplateDetail/TemplateDetail.vue";
// 选择素材库视频
import ChooseMaterial from "@/views/shotstack/EditingCenter/modules/bottomSet/components/chooseMaterial.vue";
// 充值弹窗
import vipModal from '@/socialMedia/Vip/vipModal.vue'
const vipModalRef = ref(null)
const vipVisible = ref(false)
const emit = defineEmits(['closefn'])

const props = defineProps({
  activeKey: {
    type: String,
  },
  isopendialog: {
    type: Boolean,
    default: "false"
  }
});

// 数据收集
const state = reactive({
  // 筛选标签id
  tag_id: [],
  // 版式
  aspect_ratio: "0",
  // 素材段数
  material_number: "0",
  // 时长
  material_duration: "0",
  // 0-模板广场，1-我的模板
  type: 1,
  name: '',
  material_url: ""
});

const pageAndSize = reactive({
  page: 1,
  pageSize: 15,
});

const setStateName = (name) => {
  state.name = name
}

// const tag_arr_reduce = computed(() => {
//   let tag_arr = []
//   state.tag_id.forEach(ele => {
//     ele.id && tag_arr.push(ele.id)
//   })
//   return tag_arr
// })

// 请求模板携带的参数
const query = computed(() => {
  let tag_arr = []
  state.tag_id.forEach(ele => {
    !!ele.id && tag_arr.push(ele.id)
  })
  const tag_id = tag_arr.map((ele) => ele).join(",");
  return Object.assign({}, state, { tag_id });
  // name: state.name
});

// 权限
const clipRole = computed(() => store.state.user?.clipRole || [])


onMounted(() => {
  throttlingFn();
  getFilterTag();

  window.addEventListener("resize", throttlingFn);
  route_layout.value = document.querySelector(".route-layout");
  route_layout.value.addEventListener("scroll", checkScroll);
  // gettemplateList(query.value, pageAndSize, false);
  // window.addEventListener("resize", throttlingFn);
  // route_layout.value = document.querySelector(".route-layout");
  // route_layout.value.addEventListener("scroll", checkScroll);

  // document.querySelector('.FormworkSquare').click()

});

// 侦听到变化 重新发送请求 获取最新数据
watch(
  () => query.value,
  (nv, ov) => {
    // debugger
    pageAndSize.page = 1;
    gettemplateList(nv, pageAndSize, false);
  },
  {
    deep: true,
  }
);

// onMounted(() => {
//   // 先获取标签 再获取模板

// });

// 头部筛选列表数据
const titleSerchArr = ref([]);
// 获取筛选标签
const getFilterTag = async () => {
  request.get("/work_ai", "/user/shotstack/template/tags").then((res) => {
    // console.log(res.result, "筛选标签");
    titleSerchArr.value = res.result;
    state.tag_id = res.result.map(ele => {
      return { name: ele.name, id: ele.tag_list.map(ele => ele.id).join(','), selectAll: true };
    })
    console.log(titleSerchArr.value, "我的模板筛选标签列表");
  });
};

const selectAll = (item) => {
  const existingItemIndex = state.tag_id.findIndex(
    (ele) => ele.name === item.name
  );
  state.tag_id[existingItemIndex].id = item.tag_list.map(ele => ele.id).join(',')
  state.tag_id[existingItemIndex].selectAll = true;
};

// 模板数据
const templateList = ref([]);

// 获取模板列表
const gettemplateList = async (query, pageAndSize, isNext) => {
  // 向下翻页 往里面push
  if (isNext) {
    if (isLoding.value) return
    isLoding.value = true;
    const res = await request.get(
      "/work_ai",
      "/user/shotstack/template/list",
      {
        ...query,
        ...pageAndSize
      }
    );
    const { data, ...atherData } = res.result
    Object.assign(templateList.value, atherData)
    templateList.value.data.push(...data)
    nextTick(() => {
      setPoision()
      isLoding.value = false;
    })
  } else {
    isLoding.value = true;
    const res = await request.get(
      "/work_ai",
      "/user/shotstack/template/list",
      {
        ...query,
        ...pageAndSize
      }
    );
    console.log(res, "我的模板-模板列表");
    templateList.value = res.result;
    nextTick(() => {
      setPoision()
      isLoding.value = false;
    })
  }

};

// 控制版式筛选栏父级是否隐藏
const formerTitleVisible = ref(false);
// 控制筛选栏子元素是否隐藏
const formerItemOneVisible = ref(false);
const formerItemTwoVisible = ref(false);
// 控制素材段数pop 显示和隐藏
const segments_show = ref(false);
// 时长是否展示
const material_duration_show = ref(false);

// 存放用于展示的选择的项
const selections = ref({
  aspect_ratio: "",
  material_number: "",
  material_duration: "",
});
// 修改state中的选择项
const setSelections = (name, value) => {
  if (name == "aspect_ratio") {
    state[name] = value.value;
    if (value.name == "全部" && value.value == 1) {
      selections.value.aspect_ratio = "竖版";
    } else if (value.name == "全部" && value.value == 2) {
      selections.value.aspect_ratio = "横版";
    } else {
      selections.value.aspect_ratio = value.name;
    }
    formerTitleVisible.value = false;
    formerItemOneVisible.value = false;
    formerItemTwoVisible.value = false;
  } else if (name == "material_number") {
    state[name] = value.value;
    selections.value.material_number = value.name;
    segments_show.value = false;
  } else if (name == "material_duration") {
    state[name] = value.value;
    selections.value.material_duration = value.name;
    material_duration_show.value = false;
  }
};
// 是否显示更多筛选
const filter_list_show = ref(true);
const switchover = () => {
  filter_list_show.value = !filter_list_show.value;
};

// 点击切换头部筛选高亮
const clickItem = (clickedItem, name) => {
  // 查找当前标题下是否已有活动项
  const existingItemIndex = state.tag_id.findIndex(
    (item) => item.name === name
  );

  // 如果已经有活动项且与当前点击的项不同，则替换；否则直接添加新项
  if (existingItemIndex !== -1) {
    // 检查是否点击了同一个项，如果是，则不执行任何操作
    if (state.tag_id[existingItemIndex].id === clickedItem.id) return
    // 替换为新点击的项
    state.tag_id[existingItemIndex] = { name, id: clickedItem.id, selectAll: false };
  } else {
    // 如果当前标题下没有活动项，则直接添加
    state.tag_id.push({ name, id: clickedItem.id, selectAll: false });
  }
};

const arrNum = ref(15);

/**
 * 瀑布流排版
 */

// 瀑布流容器
const material_list = ref(null);
// 图片的固定宽度
const imgWidth = 200;
// 计算一共有多少列, 以及每一列的之间的间隙
const cal = () => {
  // 获取元素的宽度
  const containerWidth = material_list.value?.offsetWidth;
  // 计算列的数量
  const columns = Math.floor(containerWidth / imgWidth);
  // 计算间隙
  const spaceNumber = columns + 1;
  const leftSpace = containerWidth - columns * imgWidth;
  // 计算剩余的空间
  const space = leftSpace / spaceNumber;
  return {
    columns,
    space,
  };
};


// 设置每张图片的位置
const setPoision = () => {
  if (Array.isArray(templateList.value?.data) && !templateList.value?.data.length) return
  let { columns, space } = cal();
  // if (space < 20) space = 20;
  if (!(Number.isInteger(columns) && columns >= 0 && columns < 4294967296)) return
  // 数组的长度为列数, 每项表示 下个图片呢纵坐标, 将每一项填充为0
  const nextTops = new Array(columns).fill(0);
  // 遍历所有图片, 设置位置
  for (let index = 0; index < material_list.value.children.length; index++) {
    const img = material_list.value.children[index];
    // img.style.opacity = 0
    // 找到 nextTops中的最小值作为当前图片的 纵坐标
    const minTop = Math.min(...nextTops);
    img.style.top = `${minTop}px`;
    const nextIndex = nextTops.indexOf(minTop); // 得到使用的是第几列的top值
    nextTops[nextIndex] += img.clientHeight + space;
    // 横坐标
    const left = (nextIndex + 1) * space + nextIndex * imgWidth;
    img.style.left = `${left}px`;
    // 求最大值 设置容器的高度
    nextTick(() => {
      material_list.value.style.height = `${Math.max(...nextTops)}px`;
      setTimeout(() => {
        img.style.opacity = 1
      }, 280)
    })
  }
};

// 检查是否滚动到底部的函数
const checkScrollBottom = async () => {
  // debugger
  if (props.activeKey != '2') return
  // 页面总高度
  const totalHeight = document.documentElement.scrollHeight;
  // 可视区高度
  const viewportHeight = window.innerHeight;
  // 滚动条垂直位置
  const scrollHeight = window.scrollY || document.documentElement.scrollTop;
  // 如果滚动位置接近底部
  if (totalHeight - viewportHeight - scrollHeight < 10) {
    if (templateList.value.data.length < templateList.value.total) {
      if (isLoding.value) return
      pageAndSize.page++
      gettemplateList(query.value, pageAndSize, true)
    }
  }
};
// 获得节流函数 限制resize触发频率
const throttlingFn = utils.throttling(400, setPoision);
// 获得节流函数, 限制滚动事件触发频率
const checkScroll = utils.throttling(300, checkScrollBottom);
// 控制loding展示
const isLoding = ref(false);
const route_layout = ref(null);

/**
 * 控制鼠标悬浮视频播放
 */
watch(
  () => props.activeKey,
  (nv, ov) => {
    if (nv === "2") {
      // debugger
      nextTick(() => {
        setPoision()
      })
    } else {

    }
  }
);

// 控制当前展示的视频变量
const currentVideo = ref(null);
// 控制当前播放的视频变量
const targetVideo = ref(null);
// 控制延迟播放的变量
const timeOutId = ref(null);
// 相同视频重复触摸的清除定时器变量
const cleartargetVideo = ref(null);
// 鼠标移入, 展示video
// canplaythrough 加载的差不多 预计不会卡顿, loadeddata 第一帧加载完成
const showVideo = (item, event) => {
  const videoElement = event.target
    .closest(".material_item")
    .querySelector("video");
  videoElement.currentTime = 0;
  // 移除上次的定时器
  clearTimeout(cleartargetVideo.value);
  // 上一次加载的视频 就是这个视频
  if (targetVideo.value && targetVideo.value == item.id) {
    console.log(videoElement.readyState, "videoElement.readyState");
    // 取消鼠标离开时的清空
    currentVideo.value = item.id;
    if (videoElement.readyState >= 1) {
      // 已经有足够数据可以播放
      videoElement.play();
    } else {
      videoElement.addEventListener(
        "loadeddata",
        () => {
          videoElement.play();
        },
        { once: true }
      );
    }
  } else {
    // 是其他视频, 延迟播放
    currentVideo.value = item.id;
    timeOutId.value = setTimeout(() => {
      targetVideo.value = item.id;

      // 当前可以播放
      if (videoElement && videoElement.readyState >= 1) {
        videoElement.play();
      } else {
        // 侦听加载完毕事件, 并开始播放
        videoElement.addEventListener(
          "loadeddata",
          () => {
            // 如果当前用户鼠标没有移动
            if (targetVideo.value && targetVideo.value === item.id) {
              videoElement.play();
            }
          },
          { once: true }
        );
      }
    }, 500);
  }
};
// 鼠标离开, 隐藏video
const hideVideo = (item, event) => {
  clearTimeout(timeOutId.value);
  timeOutId.value = null;
  // 延迟清除展示video的变量
  currentVideo.value = null;
  // 清空上一个定时器
  cleartargetVideo.value && clearTimeout(cleartargetVideo.value);
  // 开启一个新的定时器
  targetVideo.value &&
    (cleartargetVideo.value = setTimeout(() => {
      targetVideo.value = null;
      cleartargetVideo.value = null;
    }, 1000));
  const videoElement = event.target
    .closest(".material_item")
    .querySelector("video");
  videoElement.pause();
};

// 编辑模板
const templateDetail = (item) => {
  if (store.getters.isVersionExpired) {
    notification.warn({ message: "您的套餐已到期", duration: 2 });
    vipVisible.value = true
  } else {
    router.push({
      path: "/mixedCutCreat",
      query: {
        id: item.id, //查询的id
        key: "id", //获取详情的id键名
        viewType: 1, //区分哪个页面跳转过来： 1模板详情, 2混剪详情
        templateType: 1, // 用于区分查看模板详情的类型 1为我的模板 2为模板广场
        useType: "edit", //用于区分模板使用的类型 edit 编辑 view 详情 use使用
      },
    });
  }

};

// 点击使用模板, 创建混剪项目
const creatMontage = (item) => {
  if (store.getters.isVersionExpired) {
    notification.warn({ message: "您的套餐已到期", duration: 2 });
    vipVisible.value = true

  } else {
    router.push({
      path: "/mixedCutCreat",
      query: {
        id: item.id, //查询的id
        key: "id", //获取详情的id键名
        viewType: 1, //区分哪个页面跳转过来： 1模板详情, 2混剪详情
        templateType: 1, // 用于区分查看模板详情的类型 1为我的模板 2为模板广场
        useType: "use", //用于区分模板使用的类型 edit 编辑 view 详情 use使用
      },
    });
  }

};

// 点击删除模板
const deleteItem = async (id) => {
  if (store.getters.isVersionExpired) {
    notification.warn({ message: "您的套餐已到期", duration: 2 });
    vipVisible.value = true

  } else {
    Modal.confirm({
      title: "确定要删除该模板吗?",
      icon: createVNode(ExclamationCircleOutlined),
      content: "删除后将无法恢复",
      cancelText: "取消",
      okText: "确定",
      onOk: async () => {
        return new Promise(async (resolve, reject) => {
          const res = await request.del(
            "/work_ai",
            `/user/shotstack/template/delete?id=${id}`
          );
          res.result == 1 &&
            (() => {
              // gettemplateList(query.value, pageAndSize, false);
              // 将本地的这一项也删除掉
              const index = templateList.value.data.findIndex((item) => item.id == id);
              templateList.value.data.splice(index, 1);
              // 重新排版
              nextTick(() => {
                setPoision()
              })
              resolve();
            })();
        }).catch((err) => {
          message.error("删除失败!");
          return new Promise.resolve();
        });
      },
      // eslint-disable-next-line @typescript-eslint/no-empty-function
      onCancel() { },
    });
  }

};

// 离开页面 结束侦听
onUnmounted(() => {
  window.removeEventListener("resize", throttlingFn);
  route_layout.value.removeEventListener("scroll", checkScroll);
});

// 视频详情组件
const videoDetailModal = ref(null);
// 预览视频详情
const viewVideoDetail = (item) => {
  if (item.status != 1) return
  videoDetailModal.value.showModal({
    ...item,
    key: "id", //获取详情的id键名
    viewType: 1, //页面打开类型：1：模板详情，2：混剪详情
    templateType: 1, //区分模板查看详情的类型：1：为我的模板 2：为模板广场
    useType: "view", //查看视频详情
    typeofuse: "myTemplate", //用于区分模板点击使用的类型，myTemplate为我的模板 squareTemplate为模板广场
  });
};

const updateList = () => {
  // debugger
  pageAndSize.page = 1

  // gettemplateList(query.value, pageAndSize, false);
  Object.assign(state, {
    // 筛选标签id
    tag_id: titleSerchArr.value.map(ele => {
      return { name: ele.name, id: ele.tag_list.map(ele => ele.id).join(','), selectAll: true };
    }),
    // 版式
    aspect_ratio: "0",
    // 素材段数
    material_number: "0",
    // 时长
    material_duration: "0",
    // 0-模板广场，1-我的模板
    type: 1,
    name: '',
  })

}

onMounted(() => {
})


defineExpose({
  setStateName,
  updateList
})
</script>
<template>
  <div class="FormworkSquare" @click="boxClick">

    <!-- 筛选列表 -->
    <div class="filter_list">
      <!-- 每一项 -->
      <!-- {{ state.tag_id }} -->
      <!-- {{ templateList?.data?.length + '渲染的' }}
      {{ templateList?.total + '总数' }} -->
      <div class="filter_list_content" v-show="filter_list_show">
        <div class="filter_item" v-for="item in titleSerchArr" :key="item.id">
          <div class="filter_item_title">{{ item.name }}</div>
          <div class="filter_item_list">
            <div :class="{
              tag_id: state.tag_id.length && state.tag_id.find(ele => ele.name == item.name)?.selectAll,
            }" @click="selectAll(item)" class="filter_item_list_item">
              全部
            </div>
            <div class="filter_item_list_item" :class="{
              tag_id: state.tag_id.some(
                (active) => active.name === item.name && active.id === i.id
              ) && !item?.selectAll,
            }" v-for="i in item.tag_list" :key="i.id" @click="clickItem(i, item.name)">
              {{ i.name }}
            </div>
          </div>
        </div>
      </div>

      <!-- 细节筛选 -->
      <div class="filtration_data">
        <div class="filtration_data_title">
          <!-- 版式 -->
          <a-popover :autoAdjustOverflow="false" v-model:visible="formerTitleVisible" placement="bottom" trigger="click"
            :getPopupContainer="(triggerNode) => {
              return triggerNode.parentNode;
            }
              ">
            <template #content>
              <a-popover v-model:visible="formerItemOneVisible" placement="right" :getPopupContainer="(triggerNode) => {
                return triggerNode.closest('.filtration_data_title');
              }
                ">
                <template #content>
                  <div class="format_item_select" v-for="item in formerItemOneArr" :key="item.name"
                    @click="setSelections('aspect_ratio', item)">
                    {{ item.name }}
                  </div>
                </template>
                <div class="format_item" @click="
                  setSelections('aspect_ratio', { value: 1, name: '竖版' })
                  ">
                  竖版
                </div>
              </a-popover>
              <a-popover v-model:visible="formerItemTwoVisible" placement="right" :getPopupContainer="(triggerNode) => {
                return triggerNode.closest('.filtration_data_title');
              }
                ">
                <template #content>
                  <div class="format_item_select" v-for="item in formerItemTwoArr" :key="item.name"
                    @click="setSelections('aspect_ratio', item)">
                    {{ item.name }}
                  </div>
                </template>
                <div class="format_item" @click="
                  setSelections('aspect_ratio', { value: 2, name: '横版' })
                  ">
                  横版
                </div>
              </a-popover>
            </template>
            <div class="filtration_data_Item" v-if="state.aspect_ratio == '0'">
              <cu-icon type="icon-banshi" />
              版式
              <cu-icon type="icon-fangxiangxia" />
            </div>
            <div v-else class="filtration_data_Item_select">
              {{ selections.aspect_ratio }}
              <CloseOutlined @click.stop="state.aspect_ratio = '0'" style="font-size: 12px" />
            </div>
          </a-popover>

          <!-- 版式 - end -->

          <!-- 素材段数 -->
          <a-popover placement="bottom" v-model:visible="segments_show" trigger="click" :getPopupContainer="(triggerNode) => {
            return triggerNode.parentNode;
          }
            ">
            <template #content>
              <div class="format_item_select" @click="setSelections('material_number', i)"
                v-for="i in material_numberArr" :key="i.value">
                {{ i.name }}
              </div>
            </template>
            <div class="filtration_data_Item" v-if="state.material_number === '0'">
              <cu-icon type="icon-fenlan" style="font-size: 15px" />
              素材段数
              <cu-icon type="icon-fangxiangxia" />
            </div>
            <div v-else class="filtration_data_Item_select">
              {{ selections.material_number }}
              <CloseOutlined @click.stop="state.material_number = '0'" style="font-size: 12px" />
            </div>
          </a-popover>
          <!-- 素材段数 - end -->

          <!-- 时长 -->
          <a-popover placement="bottom" trigger="click" v-model:visible="material_duration_show" :getPopupContainer="(triggerNode) => {
            return triggerNode.parentNode;
          }
            ">
            <template #content>
              <div class="format_item_select" v-for="item in material_durationArr" :key="item.name"
                @click="setSelections('material_duration', item)">
                {{ item.name }}
              </div>
            </template>
            <div class="filtration_data_Item" v-if="state.material_duration === '0'">
              <cu-icon type="icon-shijian" style="font-size: 15px" />
              时长
              <cu-icon type="icon-fangxiangxia" />
            </div>
            <div v-else class="filtration_data_Item_select">
              {{ selections.material_duration }}
              <CloseOutlined @click.stop="state.material_duration = '0'" style="font-size: 12px" />
            </div>
          </a-popover>
          <!-- 时长 - end -->
        </div>
        <div class="switchover" @click="switchover">
          {{ filter_list_show ? "收起筛选" : "更多筛选" }}
          <cu-icon :type="filter_list_show ? 'icon-fangxiangshang' : 'icon-fangxiangxia'
            " />
        </div>
      </div>
    </div>

    <!-- <a-button @click="arrNum+=10">添加测试模板数据</a-button> -->
    <!-- :style="{opacity: ((item.status == 1 && item.show_img) || item.status == 0 || item.status == 2)  ? 1 : 0}"  -->
    <!-- 素材列表 -->
    <template v-if="Array.isArray(templateList?.data) && templateList?.data.length">
      <div class="material_list" ref="material_list">
        <div class="material_item" v-for="item in templateList.data" :key="item.id"
          @mouseleave="hideVideo(item, $event)" @mouseenter="showVideo(item, $event)" @click="viewVideoDetail(item)">
          <!-- 展开的操作栏 -->
          <div class="top_info" v-if="clipRole.includes('sphj')" @click.stop="() => { }">
            <a-popover trigger="hover" placement="bottomRight" :getPopupContainer="(triggerNode) => triggerNode.closest('.material_list')
              " title="Title" :arrowPointAtCenter="true" :autoAdjustOverflow="false">
              <template #content>
                <div class="btn_box">
                  <p v-if="item.status == 1" class="btn_item" @click.stop="creatMontage(item)">使用</p>
                  <p v-if="item.status == 1 || item.status == 12" class="btn_item" @click.stop="templateDetail(item)">编辑
                  </p>
                  <p class="btn_item del_btn" @click="deleteItem(item.id, index)">
                    删除
                  </p>
                </div>
              </template>
              <span class="info-rg-more" v-if="item.status != 2" @click.stop="() => { }">
                <EllipsisOutlined />
              </span>
            </a-popover>
          </div>
          <!-- 用于hove显示的视频 -->
          <div class="item_video" v-show="targetVideo == item.id && currentVideo == item.id && !!item.material_url">
            <!-- muted -->
            <video :src="item.material_url"></video>
          </div>
          <!-- 0 生成中,  1 完成  2失败 -->
          <!-- 完成有图片 -->
          <template v-if="item.status == 1 && (!!item.poster_url || !!item.thumb_url)">
            <img :style="{
              'min-height': item.height_size / 5.448972 + 'px',
              'width': '100%'
            }" :src="item.thumb_url ? item.thumb_url : item.poster_url" alt="" @load="setPoision">
            <!-- <a-empty v-show="!item.showImg" :description="null" /> -->
          </template>
          <!-- 完成没图片 -->
          <template v-else-if="item.status == 1 && !item.poster_url">
            <div
              style="position: relative; height: 350px; display: flex; align-items: center; justify-content: center;">
              <!-- <a-empty :description="null" /> -->
              <img style="width: auto; height: 100%;  object-fit: cover;"
                :src="utils.staticPath + 'images/workAi/shotstack/loding_bg.png'" alt="">

            </div>
          </template>
          <!-- 生成中 -->
          <template v-else-if="item.status == 0">
            <div style="position: relative; height: 350px;">
              <img :src="utils.staticPath + 'images/workAi/shotstack/loding_bg.png'" alt="">
              <div
                style="position: absolute; left: 50%; top: 60%; width: 70%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; justify-content: center;">
                <span style="font-size: 12px; color: #6f6d6d;">视频生成中...</span>
                <a-progress :percent="100" :showInfo="false" type="line" size="small" :stroke-color="{
                  '0%': '#108ee9',
                  '100%': '#87d068',
                }" status="active" />
              </div>
            </div>
          </template>
          <!-- 生成失败 -->
          <template v-else-if="item.status == 2">
            <!-- <div style="position: relative; height: 350px; width: 100%; ">
            <div style="display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; height: 100%; padding: 0 20px;">
              <span style="font-size: 12px; color: #6f6d6d;">视频生成失败!</span>
              <a-progress  :percent="75" status="exception" size="small"/>
            </div>
          </div> -->

            <div style="position: relative; height: 350px;">
              <img :src="utils.staticPath + 'images/workAi/shotstack/shibai.png'" alt="">
              <div
                style="position: absolute; left: 50%; top: 60%; width: 70%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; justify-content: center;">
                <span style="font-size: 12px; color: #6f6d6d;">视频生成失败!</span>
                <!-- <a-progress :percent="75" status="exception" size="small" /> -->
              </div>
            </div>
          </template>
          <!-- 拆分中 -->
          <template v-else-if="item.status == 11">
            <div style="position: relative; height: 350px;">
              <img :src="utils.staticPath + 'images/workAi/shotstack/loding_bg.png'" alt="">
              <div
                style="position: absolute; left: 50%; top: 60%; width: 70%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; justify-content: center;">
                <span style="font-size: 12px; color: #6f6d6d;">视频拆分中...</span>
                <a-progress :percent="100" :showInfo="false" type="line" size="small" :stroke-color="{
                  '0%': '#108ee9',
                  '100%': '#87d068',
                }" status="active" />
              </div>
            </div>
          </template>
          <!-- 视频拆分成功有图片 -->
          <template v-if="item.status == 12 && !!item.poster_url">
            <img :style="{
              'min-height': item.height_size / 5.448972 + 'px',
              'width': '100%'
            }" :src="item.poster_url" alt="" @load="setPoision">
            <!-- <a-empty v-show="!item.showImg" :description="null" /> -->
          </template>
          <!-- 视频拆分成功没图片 -->
          <template v-else-if="item.status == 12 && !item.poster_url">
            <div
              style="position: relative; height: 350px; display: flex; align-items: center; justify-content: center;">
              <img style="width: auto; height: 100%;  object-fit: cover;"
                :src="utils.staticPath + 'images/workAi/shotstack/loding_bg.png'" alt="">
            </div>
          </template>
          <!-- 视频拆分失败 -->
          <template v-else-if="item.status == 13">
            <!-- <div style="position: relative; height: 350px; width: 100%; ">
            <div style="display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; height: 100%; padding: 0 20px;">
              <span style="font-size: 12px; color: #6f6d6d;">视频拆分失败!</span>
              <a-progress  :percent="75" status="exception" size="small"/>
            </div>
          </div> -->

            <div style="position: relative; height: 350px;">
              <img :src="utils.staticPath + 'images/workAi/shotstack/shibai.png'" alt="">
              <div
                style="position: absolute; left: 50%; top: 60%; width: 70%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; justify-content: center;">
                <span style="font-size: 12px; color: #6f6d6d;">视频拆分失败!</span>
                <!-- <a-progress :percent="75" status="exception" size="small" /> -->
              </div>
            </div>


          </template>

          <div class="video_msg">
            <span class="video_title">{{ item.name }}</span>
            <span class="video_time">{{ item.duration_txt }}</span>
          </div>
        </div>
      </div>

    </template>
    <template v-else>
      <a-empty />
    </template>
    <!-- 加载中状态 -->
    <!-- {{ isLoding }} -->
    <div class="example" v-if="isLoding && templateList?.data?.length < templateList?.total">
      <a-spin />
    </div>
    <!-- 没有更多了 -->
    <div class="example" v-else>
      <span style="color: #999; margin-top: 20px;">没有更多啦~</span>
    </div>
  </div>
  <!-- 视频预览组件 -->
  <TemplateDetail ref="videoDetailModal" />

    <!-- 充值弹窗 -->
  <vipModal :visible="vipVisible" @close="vipVisible = false"></vipModal>

</template>

<style lang="less" scoped>
// 筛选列表中 小标题的颜色
@filter_item_title_color: rgba(28, 31, 35, 0.6);

.FormworkSquare {
  .example {
    display: flex;
    justify-content: center;
  }
}

// 下方筛选列表
.filter_list {
  display: flex;
  flex-direction: column;
  margin-top: 24px;

  .filter_list_content {
    padding-bottom: 16px;
    border-bottom: 1px solid #dddddd;

    .filter_item {
      display: flex;

      .filter_item_list {
        display: flex;
        margin-bottom: 8px;

        .filter_item_list_item {
          padding: 4px 10px;
          margin-right: 16px;
          margin-bottom: 8px;
          cursor: pointer;
          color: rgba(28, 31, 35, 0.8);

          &:hover {
            background-color: var(--ss-tag-bgc-color);
            color: #2878FF;
            border-radius: 20px;
          }

          &.tag_id {
            background-color: var(--ss-tag-bgc-color);
            color: #2878FF;
            border-radius: 20px;
          }
        }
      }

      .filter_item_title {
        color: @filter_item_title_color;
        padding: 4px 10px;
        margin-right: 16px;
        margin-bottom: 8px;
      }
    }
  }

  .filtration_data {
    display: flex;
    margin-top: 20px;
    justify-content: space-between;

    .filtration_data_title {
      display: flex;
      column-gap: 24px;
      align-items: center;

      :deep(.ss-popover-inner-content) {
        padding: 0 !important;
      }

      :deep(.ss-popover-inner) {
        border-radius: 6px !important;
        overflow: hidden;
      }

      :deep(.ss-popover-arrow) {
        display: none;
      }

      // :deep(.ss-popover-placement-bottom) {
      //     top: 410px !important;
      // }

      // :deep(.ss-popover-placement-right) {
      //     left: 122px !important;
      // }

      .filtration_data_Item {
        padding: 5px 15px;
        cursor: pointer;

        &:hover {
          background-color: var(--ss-tag-bgc-color);
          border-radius: 20px;
        }
      }

      // 选中的样式
      .filtration_data_Item_select {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 5px;
        padding: 5px 15px;
        background-color: #e8f4ff;
        color: var(--ss-primary-color);
        ;
        border-radius: 20px;
      }

      // 版式中的父项
      .format_item {
        padding: 10px 40px !important;
        cursor: pointer;

        &:hover {
          background-color: #f4f5f5;
        }
      }

      // 可选择的子项
      .format_item_select {
        cursor: pointer;

        padding: 10px 40px !important;

        &:hover {
          background-color: var(--ss-tag-bgc-color);
        }
      }
    }

    .switchover {
      padding: 5px 25px;
      cursor: pointer;
    }
  }
}

// 列表展示
.material_list {
  margin-top: 24px;
  position: relative;
  width: 100%;
  overflow: hidden;

  :deep(.ss-popover-title) {
    display: none;
  }

  :deep(.ss-popover-inner-content) {
    min-width: 80px;
  }

  .btn_box {
    display: flex;
    flex-direction: column;
    align-items: center;

    .btn_item {
      cursor: pointer;
      text-align: center;
      margin-bottom: 0;
      line-height: 25px;

      &:hover {
        color: #39acee;
      }
    }

    .del_btn {
      &:hover {
        color: #ff4d4f;
      }
    }
  }

  .material_item {
    height: 350px;
    visibility: visible;
    width: 200px;
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: all 0.4s;
    overflow: hidden;
    border-radius: 12px;
    border: 1px solid #e2e2e2;

    // padding-bottom: 5;
    &:hover {
      & .top_info {
        opacity: 1;
      }
    }

    .top_info {
      opacity: 0;
      transition: all 0.4s;
      width: 100%;
      position: absolute;
      right: 0px;
      top: 0px;
      z-index: 999;
      display: flex;
      justify-content: flex-end;
      padding-right: 5px;
      padding-top: 5px;
      padding-bottom: 5px;
      // background-color: #00000060;
      background-image: linear-gradient(to bottom,
          #000000 0%,
          #000000 10%,
          transparent 100%);

      .info-rg-more {
        width: 40px;
        height: 25px;
        cursor: pointer;
        font-size: 25px;
        padding: 4px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 3px;
        overflow: hidden;
        color: #e6e6e6;

        &:hover {
          background-color: #8b8b8b9a;
        }
      }
    }

    // 底部显示模板的名称和时间
    .video_msg {
      width: 100%;
      position: absolute;
      bottom: 0px;
      left: 0;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0px 15px;
      padding-bottom: 5px;
      background-image: linear-gradient(to top,
          #000000 0%,
          #000000 10%,
          transparent 100%);
      border-radius: 0 0 12px 12px;
      overflow: hidden;
      // background-color: #000;

      .video_title {
        font-size: 12px;
        font-weight: 600;
        color: #fff;
      }

      .video_time {
        padding: 0px 5px;
        background: #1c1f23;
        color: #fff;
        font-size: 12px;
        border-radius: 5px;
        display: inline-block;
        height: 19px;
        line-height: 19px;
      }
    }

    // 使用按钮
    .isUse {
      position: absolute;
      right: 10px;
      top: 10px;
      z-index: 101;
      transition: opacity 0.3s;
      font-size: 13px;
      padding: 0px 8px;
      height: 25px;
      // line-height: 20px;
    }

    .item_video {
      position: absolute;
      z-index: 100;
      top: 0;
      left: 0;
      width: 100%;
      background-color: #000;
      overflow: hidden;

      video {
        width: 100%;
        height: 350px;
      }
    }

    img {
      height: auto;
      object-fit: contain;
      opacity: 1;
      vertical-align: middle;
      width: 100%;
    }

    img {
      height: auto;
      object-fit: contain;
      opacity: 1;
      vertical-align: middle;
      width: 100%;
    }
  }
}



@fontColor: #1c1f23;

.title_box {
    display: flex;
    flex-direction: column;

    .title {
        font-size: 14px;
        font-weight: 600;
    }

    .tips {
        font-size: 12px;
        color: #aaaaaa;
        margin-top: 10px;
    }
}

.content {
    display: flex;
    flex-direction: column;
    // align-items: center;

    .radio_box {
        display: flex;
        align-items: center;

        .radio_title {
            margin-right: 15px;
        }
    }

    .update_content {
        padding-top: 20px;

        .video_link {
            display: flex;

            // align-items: center;
            .link_title {
                margin-right: 15px;
                white-space: nowrap;
            }
        }

        .tags_select {
            display: flex;
            margin-bottom: 20px;

            .tags_title {
                margin-right: 15px;
                white-space: nowrap;
            }
        }

        .video_upload {
            display: flex;

            .video_title {
                margin-right: 15px;
                white-space: nowrap;
            }

            // 选择视频
            .selectVideo {
                height: 120px;
                width: 120px;
                background-color: #f1f3f5;
                display: flex;
                align-items: center;
                justify-content: center;
                cursor: pointer;

                .selectVideo_content {
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    font-size: 14px;
                }
            }

            // 视频容器
            .video_con {
                width: 150px;
                height: 250px;
                background-color: #000;
                display: flex;
                align-items: center;
                justify-content: center;
                position: relative;

                .operate_con {
                    display: none;
                }

                &:hover {
                    .operate_con {
                        width: 150px;
                        height: 250px;
                        position: absolute;
                        left: 0;
                        top: 0;
                        background-color: rgba(0, 0, 0, .3);
                        display: flex;
                        align-items: center;
                        justify-content: center;

                        .play_icon {
                            color: #fff;
                            font-size: 24px;
                            cursor: pointer;

                            &:hover {
                                color: #ff5652;
                            }
                        }

                        .delete_icon {
                            color: #fff;
                            font-size: 24px;
                            cursor: pointer;

                            &:hover {
                                color: #ff5652;
                            }
                        }
                    }
                }

                video {
                    max-width: 100%;
                    max-height: 100%;
                }
            }
        }

        .template_split_type {
            display: flex;
            margin: 10px 0;

            .template_split_type_title {
                margin-right: 15px;
                white-space: nowrap;
            }
        }
    }
}

.bottom {
    display: flex;
    justify-content: center;
}

.no-border-header .ss-modal-header {
  border-bottom: none !important;
}

</style>
